<template>
	<view class="topic">
		<view class="nav-header-box">
			<view class="header-left" @click="goback">
				<view class="header-left-icon"></view>
			</view>
			<view class="header-title">
				<view class="header-p">{{topicTitle}}</view>
			</view>
			<view class="header-right">
				<view class="header-right-icon"></view>
			</view>
		</view>

		<view class="section-box">
			<view class="section-list">
				<view class="ul-list">
					<block v-for="item in topicList" :key="item.id">
						<view class="li-list" @click="goDetail(item.id)">
							<view class="left-img">
								<image v-if="/.*thepaper.*/gi.test(item.head_img)"
									:src="`https://images.weserv.nl/?url=${item.head_img}`" mode="aspectFill">
								</image>
								<image v-else :src="`${item.head_img}`" mode="aspectFill"></image>
							</view>
							<view class="content-writing">
								<view class="p-location">{{item.tag}}</view>
								<view class="p-title">{{item.title}}</view>
								<view class="p-come">
									<view class="p-come-left">
										<view class="p-person">
											<text class="person-icon">
												<image :src="item.user_avators" mode="aspectFit"></image>
											</text>
											<text class="person">{{item.media}}</text>
										</view>
										<view class="p-time">{{item.publish_time}}</view>
									</view>
									<view class="p-come-right">
										<!-- <text class="come-right-icon"></text> -->
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getCategory
	} from "@/api/request"
	export default {
		data() {
			return {
				topicTitle: "",
				topicList: []
			}
		},
		methods: {
			//返回上一页
			goback() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			//去详情页
			goDetail(id) {
				console.log(id);
				uni.navigateTo({
					url: "/pages/detail/detail?id=" + id
				})
			},
			getCategoryNewsList(newsCategory) {
				let data = {
					newsCategory,
				}
				uni.showLoading({
					title:"加载中..."
				})
				getCategory(data).then(content => {
					// console.log("111",content);
					let {
						code,
						data
					} = content
					if (code == 200) {
						this.topicList = data
						uni.hideLoading();
					}
				}).catch(err => {
					console.log("222", err);
				})
			}
		},
		onLoad(e) {
			// console.log(e);
			this.topicTitle = e.type
			this.getCategoryNewsList(e.type);
		}
	}
</script>

<style lang="scss" scoped>
	.topic {
		position: relative;
		// background-color: #fff;
		width: 100%;
		padding: 0 $uni-box-padding;

		.nav-header-box {
			position: fixed;
			top: 0;
			left: 0;
			padding: 30rpx 30rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			z-index: 1;
			// height: 48rpx;

			.header-title {
				font-size: 32rpx;
				font-weight: bold;

			}

			.header-left,
			.header-right {
				width: 48rpx;
				height: 48rpx;
				background-repeat: no-repeat;
				background-size: 100%;
			}

			.header-left {
				background-image: url("@/static/image/back.png");
			}

			.header-right {
				background-image: url("@/static/image/more2.png");
			}
		}

		.section-box {
			padding-top: 110rpx;
			width: 100%;

			.section-content {
				width: 100%;
				padding: 32rpx;
			}

			.content-img-box {
				padding: 10rpx;
				width: 100%;
				// height: 366rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.content-writing {
				width: 100%;

				.p-location {
					font-size: 28rpx;
					color: $uni-text-color-grey;
				}

				.p-title {
					padding: 15rpx 0 10rpx 0;
					font-size: 32rpx;
					color: #000;
				}

				.p-come {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.p-come-left {
					display: flex;
					align-items: flex-end;
				}

				.p-person {
					display: flex;
					align-items: center;
					margin-right: 20rpx;
				}


				.person-icon {
					display: block;
					width: 40rpx;
					height: 40rpx;
					// background-color: #000;
					border-radius: 50%;
					margin-right: 5rpx;
					image{
						border: 1px solid #f0f0f0;
						border-radius: 50%;
						width: 100%;
						height: 100%;
					}
				}

				.person {
					font-size: 28rpx;
					color: #4e4b46;
					font-weight: bold;
				}

				.p-time {
					padding-left: 10rpx;
					font-size: 24rpx;
					color: $uni-text-color-grey;
				}

				.p-come-right {
					width: 40rpx;
					height: 40rpx;
					background-image: url("../../static/image/more.png");
					background-repeat: no-repeat;
					background-size: 100%;
				}
			}
		}

		.section-list {
			// border: 1px solid #000;
			// margin-top: 30rpx;
			width: 100%;
			// height: 500rpx;

			.scroll-view-height {
				// height: calc(100vh - 622rpx);
			}

			.li-list {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.left-img {
					width: 192rpx;
					height: 192rpx;

					image {
						border-radius: 10rpx;
						width: 100%;
						height: 100%;
					}
				}

				.content-writing {
					flex: 1;
					padding: 0 10rpx;

					.p-title {

						height: 106rpx;
						overflow: hidden;
						// text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						display: -webkit-box;
					}
				}
			}
		}
	}
</style>